<template>
	<view>
		<!-- 带描述信息 -->
		<view class="title">
		<uni-list v-for="(value,key,index) in car_list" :key="index">
			<uni-list-item :note="value.id" :show-arrow=false :title="value.car_type_name"  thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/hx.png" showSwitch="true" @switchChange="switchChange"/>
		</uni-list>
		</view>

	    <button class="register_submit" @click="chooseFactory">绑定车辆</button>
		<button class="register_submit" @click="delcar">解除绑定</button>
	</view>

</template>

<script>
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
export default {
	components: { uniList, uniListItem },

	data() {
		return {
			//session
			sessionid:'',
			hearder:'',
			//商品描述html
			carData: {
				detail: '',
				factory_name: '选择',
				brand_name: '选择',
				vehicle_name: '选择',
				year_name: '选择',
				factory_id: '',
				brand_id: '',
				vehicle_id: '',
				year_id: ''
			},
			car_list: [],
			oper_type:'绑定车辆',
			oper_id:'bind',
		};
	},
	onShow() {},
	onLoad(e) {
		console.debug(e);
		this.register_submit();
	},
	methods: {
		register_submit: function() {
			//var indexNav = this.$SysCache.get('app_car_factorylist');
			var indexNav =false;
			if (indexNav) {
				this.car_list = indexNav;
			} else {
				this.sessionid = uni.getStorageSync("sessionid");
				this.hearder = uni.getStorageSync("hearder");
				if (this.sessionid == null||this.sessionid == ''){
					uni.showToast({title: "请先登录！"});
					return;
				}
				var header = this.hearder;
				var sessionid = this.sessionid;
				var data = {};
				this.car_list = [];
				this.$Request.post(this.$api.car.queryMyCarlist,data,header+sessionid).then(res => {

					if (res.code == 200) {
						/*
						{"car_type_name":"帝豪","path":"1","level":1,"spells_code":"D","parent_id":1,"id":36026}
						*/
						this.car_list = res.data;
						if (this.car_list==[]){
							this.oper_type = '解除绑定';
							this.oper_id = 'unbind';
						} else {
							this.oper_type = '绑定车辆';
							this.oper_id = 'bind';
						}

						console.log(this.oper_id);
						//this.$SysCache.put("app_car_factorylist",res.data,86400);
					}
				});
			}
		},
		switchChange: function(e) {
			console.log(e);
			this.carData.year_id = e;
		},
		delcar: function() {
			console.log(this.carData.year_id);
			if (this.carData.year_id == ''||this.carData.year_id == null)  {
				uni.showToast({title: "请先选择车辆！"});
				return;
			}
			//var indexNav = this.$SysCache.get('app_car_factorylist');
			var indexNav =false;
			if (indexNav) {
				this.car_list = indexNav;
			} else {
				this.sessionid = uni.getStorageSync("sessionid");
				this.hearder = uni.getStorageSync("hearder");
				if (this.sessionid == null||this.sessionid == ''){
					uni.showToast({title: "请先登录！"});
					return;
				}
				var header = this.hearder;
				var sessionid = this.sessionid;
				var data = {};
				this.$Request.post(this.$api.car.deleteCar+"?car_id="+this.carData.year_id,data,header+sessionid).then(res => {

					if (res.code == 200) {
						/*
						{"car_type_name":"帝豪","path":"1","level":1,"spells_code":"D","parent_id":1,"id":36026}
						*/
						//this.car_list = res.data;
						this.register_submit();
						//console.log(this.carData.detail);
						//this.$SysCache.put("app_car_factorylist",res.data,86400);
					}
				});
			}
		},
		chooseFactory: function(e) {

			console.log('picker发送选择改变，携带值为', e);
			if (this.oper_id=='bind') uni.navigateTo({url:'./factory'});
			if (this.oper_id=='unbind') {

				this.delcar();
			}
			//this.index = e.target.value
			//this.vehicle_select = data
		}
	}
};
</script>

<style lang="scss">
.register_submit {
		display: block;
		width: 100%;
		height: 80upx;
		border-radius: 40upx;
		margin-top: 30px;
		background: #f47952;
		border-radius: 4px;
		font-size: 16px;
		line-height: 42px;
		color: #fff;
		text-align: center;
		border: none;
	}

.block {
	width: 94%;
	padding: 20upx 3%;
	.title {
		width: 100%;
		font-size: 34upx;
	}
	.content {
		.my {
			width: 100%;
			height: 120upx;
			display: flex;
			align-items: center;
			font-size: 30upx;
			border-bottom: solid 1upx #eee;
		}
		.amount {
			width: 100%;

			.list {
				display: flex;
				justify-content: space-between;
				padding: 20upx 0;
				.box {
					width: 30%;
					height: 120upx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10upx;
					box-shadow: 0upx 5upx 20upx rgba(0, 0, 0, 0.05);
					font-size: 36upx;
					background-color: #f1f1f1;
					color: 333;
					&.on {
						background-color: #f06c7a;
						color: #fff;
					}
				}
			}
			.num {
				margin-top: 10upx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.text {
					padding-right: 10upx;
					font-size: 30upx;
				}
				.input {
					width: 28.2vw;
					border-bottom: solid 2upx #999;

					justify-content: flex-end;
					align-items: center;
					input {
						margin: 0 20upx;
						height: 60upx;
						font-size: 30upx;
						color: #f06c7a;
						justify-content: flex-end;
						align-items: center;
					}
				}
			}
		}
		.pay-list {
			width: 100%;
			border-bottom: solid 1upx #eee;
			.row {
				width: 100%;
				height: 120upx;
				display: flex;
				align-items: center;
				.left {
					width: 100upx;
					flex-shrink: 0;
					display: flex;
					align-items: center;
					image {
						width: 80upx;
						height: 80upx;
					}
				}
				.center {
					width: 100%;
					font-size: 30upx;
				}
				.right {
					width: 100upx;
					flex-shrink: 0;
					display: flex;
					justify-content: flex-end;
				}
			}
		}
	}
}
.pay {
	margin-top: 20upx;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	.btn {
		width: 70%;
		height: 80upx;
		border-radius: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background-color: #f06c7a;
		box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
	}
	.tis {
		margin-top: 10upx;
		width: 100%;
		font-size: 24upx;
		display: flex;
		justify-content: center;
		align-items: baseline;
		color: #999;
		.terms {
			color: #5a9ef7;
		}
	}
}
</style>
